<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span
            >发布数据
            <span style="color: green; font-size: 14px; font-weight: 600; margin-left: 20px">
              通过{{ newsList.filter((e: any) => e.status == true).length }}</span
            >
            <span style="color: red; font-size: 14px; font-weight: 600; margin-left: 20px"
              >不通过{{ newsList.filter((e: any) => e.status == false).length }}</span
            >
          </span>
          <el-button @click="yjtg" class="button" v-hasPermiss="'yjsh'" type="primary"
            >一键通过</el-button
          >
        </div>
      </template>
      <div class="text item">
        <el-scrollbar height="640px">
          <el-table :data="newsList" style="width: 100%" height="640px">
            <el-table-column
              :show-overflow-tooltip="true"
              fixed
              prop="info[0].nickname"
              label="发布用户"
              width="200"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              fixed
              prop="info[0].email"
              label="发布邮箱"
              width="200"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="content"
              label="发布内容"
              width="200"
            />
            <el-table-column prop="imgs" label="发布图片" width="220">
              <template #default="scope">
                <el-image
                  error="暂无图片"
                  style="width: 100px; height: 100px"
                  :src="scope.row.imgs[0]"
                  :preview-src-list="scope.row.imgs"
                  :initial-index="0"
                  preview-teleported
                >
                  <template #error>
                    <div
                      style="
                        width: 100px;
                        height: 100px;
                        background-color: gainsboro;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      "
                    >
                      暂无图片
                    </div>
                  </template>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-checkbox
                  v-hasPermiss="'sh'"
                  @click.stop="sh(scope.row._id, !scope.row.status, $event)"
                  v-model="scope.row.status"
                  :label="scope.row.status == true ? '取消通过' : '审核通过'"
                  size="large"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
    </el-card>
    <el-pagination
      :page-sizes="[5, 7, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { newsAllPass, newsSinglePass, getNewsInfos } from "@/api/news"
const yjtg = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0)",
  })
  newsAllPass("/user/yjtg")
    .then((res: any) => {
      if (res.msg == "全部审核通过") {
        ElMessage.success(res.msg)
        init()
      } else {
        ElMessage.error(res.msg)
      }
    })
    .finally(() => {
      loading.close()
    })
}
const sh = (id: string, flag: boolean, e: any) => {
  if (e.target.tagName !== "INPUT") return
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0)",
  })
  newsSinglePass("/user/passfbuinfo", {
    id: id,
    flag: flag,
  })
    .then((res: any) => {
      if (res.msg == "审核通过") {
        ElMessage.success(res.msg)
      } else {
        ElMessage.error(res.msg)
      }

      init()
    })
    .finally(() => {
      loading.close()
    })
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  init(pageNumber.value, pageSize.value)
}
const handleCurrentChange = (val: number) => {
  pageNumber.value = val
  init(pageNumber.value, pageSize.value)
}
const total = ref<number>(0)
const pageNumber = ref<number>(1)
const pageSize = ref<number>(5)
const newsList = ref([])
const init = (pageNumber: number = 1, pageSize: number = 10) => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0)",
  })
  getNewsInfos(`/user/getfabudailyrecord?flag=true&pagesize=${pageSize}&pagenumber=${pageNumber}`)
    .then((res: any) => {
      let s = JSON.parse(JSON.stringify(res.data.list))
      for (let e of s) {
        let s = []
        for (let ea of e.imgs) {
          ea = import.meta.env.VITE_APP_BASE_URL + ea
          s.push(ea)
        }
        e.imgs = s
      }
      newsList.value = s
      total.value = res.data.total
    })
    .finally(() => {
      loading.close()
    })
}
init(pageNumber.value, pageSize.value)
</script>

<style lang="scss" scoped>
:deep(.el-table__body) {
  // table-layout: fixed !important;
  width: 100% !important;
}
:deep(.el-table__header) {
  // table-layout: fixed !important;
  width: 100% !important;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  box-sizing: border-box;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 99%;
}
</style>
